<template>
  <view style="min-height: 100vh;" class="u-skeleton" :class="['goodsDetail',{scrollForbidden:showModal==true}]">
    <!-- 头部 -->
    <swiper autoplay indicator-dots='true' indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="white" class="u-skeleton-fillet" >
      <swiper-item v-for="(value,index) in goodsDetail.thumb_url" :key="index">
        <img :src="value.img_Url" class="slide-image" mode="aspectFill"/>
      </swiper-item>
    </swiper>
	<!-- <u-swiper height="300px" :list="imgList" indicator-pos="bottomCenter"></u-swiper> -->
    <view class="name_wrapper">
	   <view class="desc">
	     <view class="price">
			<span class="s-price u-skeleton-fillet">￥{{goodsDetail.selling_price}}</span>
			<!-- <view class="m-price">￥{{goodsDetail.m_price}}</view> -->
	     </view>
	     <view class="bottom">
			<!-- <view class="sale">月销售{{goodsDetail.sale_count}}笔</view> -->
	     </view>
	   </view>
      <view class="name u-skeleton-fillet">
        {{goodsDetail.name}}
      </view>
	  <view class="top-detail u-skeleton-fillet">
	    {{goodsDetail.desc}}
	  </view>
    </view>
    <!-- 头部结束 -->


    <!-- 规格等详情 -->
    <view class="goods_desc">
      <view>
       <!-- <view class="goods_desc_item">
          <view class="left-text u-skeleton-fillet">运费：<span>￥10</span></view>
          <span class="list_item_arrow">
            <image src="../../static/goodsDetail/jiantou_you.png"></image>
          </span>
        </view> -->
		<view class="goods_desc_item" @click="showCart">
		  <view class="left-text u-skeleton-fillet">规格：<span>选择商品规格数量</span></view>
		  <span class="list_item_arrow">
		    <image src="../../static/goodsDetail/jiantou_you.png"></image>
		  </span>
		</view>
		<view class="goods_desc_item" @click="showDiscountPopup">
		  <view class="left-text one-line u-skeleton-fillet">
			<span><span style="color: #B8B8B8;font-size: 12px;">优惠活动：</span><span>{{discountStr?discountStr:'无'}}</span></span>
		  </view>
		  <span class="list_item_arrow">
		    <image src="../../static/goodsDetail/jiantou_you.png"></image>
		  </span>
		</view>
		<view style="width: 100%;height: 10px;"></view>
		<view class="spec-value">
			<view style="padding-bottom: 10px;font-weight: bold">说明书</view>
			<view class="content">

			  <view class="content-item" v-if="goodsDetail.specification">
				<view class="item-left">药品规格</view>
				<view  class="item-right">{{goodsDetail.specification}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.approval_number">
			  	<view class="item-left">批准文号</view>
			  	<view  class="item-right">{{goodsDetail.approval_number}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.manufacturer">
			  	<view class="item-left">生产厂商</view>
			  	<view  class="item-right">{{goodsDetail.manufacturer}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.manufacturer_address">
			  	<view class="item-left">生产厂商地址</view>
			  	<view  class="item-right">{{goodsDetail.manufacturer_address}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.manufacturer_contact">
			  	<view class="item-left">生产厂商联系方式</view>
			  	<view  class="item-right">{{goodsDetail.manufacturer_contact}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.electronic_regulatory_code">
			  	<view class="item-left">电子监管码</view>
			  	<view  class="item-right">{{goodsDetail.electronic_regulatory_code}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.usage_and_dosage">
			  	<view class="item-left">用法用量</view>
			  	<view  class="item-right">{{goodsDetail.usage_and_dosage}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.indications">
			  	<view class="item-left">适应症</view>
			  	<view  class="item-right">{{goodsDetail.indications}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.adapt_to_the_crowd">
			  	<view class="item-left">适应人群</view>
			  	<view  class="item-right">{{goodsDetail.adapt_to_the_crowd}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.component">
			  	<view class="item-left">成分</view>
			  	<view  class="item-right">{{goodsDetail.component}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.adverse_reactions">
			  	<view class="item-left">不良反应</view>
			  	<view  class="item-right">{{goodsDetail.adverse_reactions}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.contraindications">
			  	<view class="item-left">禁忌</view>
			  	<view  class="item-right">{{goodsDetail.contraindications}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.precautions">
			  	<view class="item-left">注意事项</view>
			  	<view  class="item-right">{{goodsDetail.precautions}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.interaction">
			  	<view class="item-left">药物相互作用</view>
			  	<view  class="item-right">{{goodsDetail.interaction}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.medication_for_children">
			  	<view class="item-left">儿童用药</view>
			  	<view  class="item-right">{{goodsDetail.medication_for_children}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.medication_for_pregnancy_x_lactation">
			  	<view class="item-left">妊娠与哺乳用药</view>
			  	<view  class="item-right">{{goodsDetail.medication_for_pregnancy_x_lactation}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.medication_for_aged">
			  	<view class="item-left">老年人用药</view>
			  	<view  class="item-right">{{goodsDetail.medication_for_aged}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.properties">
			  	<view class="item-left">性状</view>
			  	<view  class="item-right">{{goodsDetail.properties}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.packing">
			  	<view class="item-left">包装</view>
			  	<view  class="item-right">{{goodsDetail.packing}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.dosage_form">
			  	<view class="item-left">剂型</view>
			  	<view  class="item-right">{{goodsDetail.dosage_form}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.storage">
			  	<view class="item-left">贮藏</view>
			  	<view  class="item-right">{{goodsDetail.storage}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.pharmacological_action">
			  	<view class="item-left">药理作用</view>
			  	<view  class="item-right">{{goodsDetail.pharmacological_action}}</view>
			  </view>

			  <view class="content-item" v-if="goodsDetail.expiry_date">
			  	<view class="item-left">有效期</view>
			  	<view  class="item-right">{{goodsDetail.expiry_date}}</view>
			  </view>

			</view>
		</view>
		<view style="width: 100%;height: 10px;"></view>
        <!-- 规格等详情结束 -->

        <view class="desc-nav u-skeleton-fillet">
          <view class="nav-item" @click="isShow(1)">
            <span :class="{'active':is_show==1}">商品详情</span>
          </view>
          <view class="nav-item" @click="isShow(2)">
            <span :class="{'active':is_show==2}">同类热销</span>
          </view>
        </view>

        <!-- 同类热销 -->
        <view class="comment" v-if="is_show==2">
          <view class="page-section-spacing">
          	<scroll-view class="scroll-view_H" scroll-x="true">
          		<!-- 遍历 -->
          		<view class="scroll-view-item_H" v-for="(goodsItem,goodsIndex) in recommendData" :key="goodsIndex" @click="toGoodsDetail(goodsItem.id)">
          			<image class="item-img" :src="goodsItem.thumb_url?goodsItem.thumb_url:errImgUrl"></image>
          			<view class="no-wrap">{{goodsItem.name}}</view>
          			<view style="display: flex;justify-content: space-between;padding: 5px;font-size: 16px;">
          				<view style="color: red;">￥{{goodsItem.selling_price}}</view>
          				<!-- <image @click.stop="showCartModal(goodsItem.id)" style="width:20px;height: 20px;" src="../../static/mipmap-xhdpi/plus.png"></image> -->
          			</view>
          		</view>
				<view v-if='recommendData.length==0' class="null">
					空空如也~
				</view>
          	</scroll-view>
          </view>
        </view>
        <!-- 同类热销结束 -->
      </view>

      <!-- 商品介绍 -->
      <view class="goods_introduce" v-if="is_show==1">
        <view class="content">
          <view v-html="goodsDetail.detail"></view>
        </view>
      </view>
      <!-- 商品介绍结束 -->

      <!-- 底部购物栏 -->
      <view class="cartBar">
        <view class="cartBar_left" v-if="!credit">
			<button class="cartBar_left_item cartIcon_wrapper" open-type="contact"
					:session-from="'udesk|'+nickname+'|'+photo_url+'|customer^'+customer_info_str"
					@contact="contactCallBall">
            <image style="width: 20px;height: 19px;" src="../../static/goodsDetail/lianxikefu.png"></image>
            <view>客服</view>
          </button>
          <view class="cartBar_left_item cartIcon_wrapper" @click="toCart">
            <image style="width: 20px;height: 19px;"src="../../static/goodsDetail/gouwuche.png"></image>
            <view>购物车</view>
            <view class="cartIcon" v-show="cartListNum!='0' &&cartListNum">{{cartListNum}}</view>
          </view>
        </view>
        <view class="cartBar_right" v-if="!credit">
          <view  @click="showCart">加入购物车</view>
          <view @click="buy">立即购买</view>
        </view>
      </view>
      <!-- 底部购物栏结束 -->

      <!-- 弹出层 -->
     <!-- <view class="mask" v-if="showModal" @click="hideCart"></view> -->
	 <u-mask :show="showModal" @click="hideCart"></u-mask>
      <view class="modalDlg" v-if="showModal">
        <view class="modalDlg_top">
          <img :src="goodsDetail.thumb_url.length>0?goodsDetail.thumb_url[0].img_Url:''" alt="">
          <view class="modalDlg_top_right">
            <view class="modalDlg_top_right_name">
              <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
              <span>{{goodsDetail.name}}</span>
            </view>
            <view class="cart_price">
              <span v-if="classifyIndex==-1">￥{{goodsDetail.selling_price}}</span>
              <span v-if="classifyIndex!=-1&&!buyNow">￥{{goodsDetail.goods_spu_info[classifyIndex].price}}</span>
              <span v-if="classifyIndex!=-1&&buyNow">￥{{goodsDetail.goods_spu_info[classifyIndex].distribution_price==''?goodsDetail.goods_spu_info[classifyIndex].price:goodsDetail.goods_spu_info[classifyIndex].distribution_price}}</span>
              <span v-if="classifyIndex==-1">库存：{{goodsDetail.stock}}</span>
              <span v-if="classifyIndex!=-1">库存：{{goodsDetail.goods_spu_info[classifyIndex].stock}}</span>
            </view>
          </view>
        </view>
        <!-- <view class="modalDlo_center">
          <view class="modalDlo_center_tit" v-if="goodsDetail.goods_spu_info.length!=0">规格</view>
          <view class="modalDlo_center_classify">
            <view
              v-for="(item,index) of goodsDetail.goods_spu_info"
              :key="index" @click="select_classify(item,index)"
              :class="{selectClassify:index==classifyIndex}"
            >
              {{item.spu_name}}
            </view>
          </view>
        </view> -->
        <view class="modalDlo_bottom">
          <!-- <count @numberChange="numberChange" :stock="classifyIndex==-1?goodsDetail.stock:goodsDetail.goods_spu_info[classifyIndex].stock">
            <view>购买数量</view>
          </count> -->
		  <view style="padding-bottom: 10px;">购买数量</view>
		  <u-number-box v-model="num" @change="numberChange"></u-number-box>
        </view>
		<block v-if="!userToken">
			<button class="join_cart" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">请先登录</button>
			<!-- <button class="join_cart" v-else open-type="getUserInfo" @getuserinfo="bindGetUserInfo">立即购买</button> -->
		</block>
		<block v-else>
			<view class="join_cart" v-if="!buyNow" @click="addCart">加入购物车</view>
			<view class="join_cart" v-else @click="buying">立即购买</view>
		</block>
      </view>
      <!-- 弹出层结束 -->
    </view>

	<u-popup v-model="popupShow" closeable="false" border-radius="15" height="600" mode="bottom">
		<view style="color: grey;">
			<view style="padding: 15px" v-for="(item,index) in goodsDetail.discount_sales_rule_list" :key="index">{{item.discount_sales_rule_info.name}}</view>
		</view>
	</u-popup>

	<u-skeleton :loading="loading" :animation="false" bgColor="#FFF"></u-skeleton>
  </view>
</template>

<script>

  export default {
    name: 'goodsDetail',
    data() {
		return {
			popupShow: false,
			FileUrl: this.$base,
			id: '',//商品id
			goodsDetail: '',//商品信息
			showModal: false,//显示弹出层
			buyNow: false,//显示加入购物车还是立即购买按钮
			is_show: 1,
			num: 1,//购买商品数量
			cartListNum: '',//购物车数量
			commentList: "",   //评论内容
			imgList: [],
			discountStr: '',
			credit: '',//credit为来自积分商城的跳转
			classifyIndex: -1,//规格索引
			classifyId: '',//规格id
			page: 1,
			recommendData: [],
			is_img: '',
			user_id: '', //用户ID
			loading: true, // 是否显示骨架屏组件
			userToken: '',
			merchant: '',
			customer_info_str:"",
			nickname:"-",
			photo_url:"http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/aueco_wxapp/default.png",
			userInfo: '',
			merchant_id:''
		}
    },
    onLoad(options) {
		this.credit = options.from;
		this.id = options.id;
		this.getGoodsDetails()
		this.getCartList()
        this.userToken = wx.getStorageSync("userToken")
		this.user_id = wx.getStorageSync("user_id")
		this.merchant = wx.getStorageSync('merchant')
		if(this.userToken){
			this.getUserInfos()
		}
		if(options.user_id){
			this.invited_user_id = options.user_id
			wx.setStorageSync("invited_user_id ",this.invited_user_id)  //邀请人id存本地
		}
    },
    watch: {
      goodsDetail(nval) {
		//这里是设置轮播图的  TODO
        /* if (nval.goods_banner.length != 0) {
          this.imgList = nval.goods_banner
        } else {
          this.imgList = [nval.thumb_url]
        } */
      }
    },
    methods: {

		contactCallBall(e) {
			if(e.detail.path){
				this.$currency.navigateTo('/pages/udeskCart/index?key='+e.detail.query.key)
			}
		},

      isShow(index) {
        this.is_show = index;
      },
      showCart() { //显示加入购物车
        this.num = 1;//清除规格数量
        this.showModal = true
        this.buyNow = false
      },
      buy() {//显示立即购买
        this.num = 1;//清除规格数量
        this.showModal = true
        this.buyNow = true
      },
      async buying() {   //点击弹窗的立即购买
        if (this.num <= 0) {
			wx.showToast({
				title: '购买数量不能为0',
				icon: 'none'
			})
			return
        } /* else if (this.classifyId == '' && this.credit != 'credit') {
          this.$currency.showToast('先选择规格吧');
          return
        } */
		let userToken=wx.getStorageSync('userToken')
        let res = await this.$api.submitOrder({
          medicine_id: this.id,
          num: this.num,
		  user_token: userToken
        },this.$baseUrl)
        if (res.data.level == 'success') {
		  res.data.data.medicine_id = this.id
		  res.data.data.num = this.num
          this.$store.dispatch('setOrder', res.data.data)
          wx.navigateTo({
          	url: '/pages/orderConfirm/orderConfirm'
          })
        } else {
          wx.showToast({
          	title: res.data.message,
          	icon: 'none'
          })
        }

      },
      hideCart() {
        this.showModal = false
      },
      async getGoodsDetails(id) {
		let merchant = wx.getStorageSync('merchant')
		this.loading = true;
        let res = await this.$api.getMedicineDetail( {
          medicine_id: this.id,
		  merchant_id: merchant.merchant_id
        },this.$baseUrl)
        if (res.data.level == 'success') {
          let str = res.data.data;
          if (str.detail != null) {
            str.detail = str.detail.replace(/<img[^>]*>/gi, function (match, capture) {
              return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
            });
            str.detail = str.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align: top;" ');
          }
          this.goodsDetail = str
		  res.data.data.discount_sales_rule_list.forEach((item,index) => {
			if(index == res.data.data.discount_sales_rule_list.length - 1){
				this.discountStr = this.discountStr + item.discount_sales_rule_info.name
			} else{
				this.discountStr = this.discountStr + item.discount_sales_rule_info.name + '，'
			}
		  })
		  if(this.goodsDetail.classify_first_id){
			this.getRecommendMedicineList(this.goodsDetail.classify_first_id)
		  }

          //判断店铺是否存在
			if(!merchant){
				this.merchant_id = str.merchant_id
				this.getMerchantInfo()
			}

        }
		this.loading = false;
      },
      numberChange(num) {
        this.num = num.value
      },
      async addCart() {//添加到购物车
        const _this = this
        if (this.num <= 0) {
          this.$currency.showToast('购买数量不能为0');
          return
        } /* else if (this.classifyId == '') {
          this.$currency.showToast('先选择规格吧');
          return
        } */
		 wx.showLoading()
        var userToken = wx.getStorageSync('userToken')
        let res = await this.$api.addShopCart({
          medicine_id: this.id,
          num: this.num,
          user_token: userToken,
          /* goods_spu_id: this.classifyId */
        },this.$baseUrl)
        if (res.data.level == 'success') {
          wx.hideLoading();
          this.showModal = false;
		  this.getCartList();
          wx.showToast({
          	title: res.data.message,
          	icon: 'success'
          })
          this.getCartList()
        } else {
			wx.hideLoading();
          wx.showToast({
          	title: res.data.message,
			icon: 'none'
          })
        }
      },
      async getCartList() {
        let userToken = wx.getStorageSync('userToken');
		let merchant = wx.getStorageSync('merchant')
		if(userToken){
			let res = await this.$api.getShopCart({user_token: userToken,merchant_id: merchant.merchant_id},this.$baseUrl);
			if (res.data.level == 'success') {
			  if(res.data.data.length==0){
				this.cartListN = 0
			  } else{
				this.cartListNum = res.data.data[0].cart_item.length
			  }

			}
		}
      },
      select_classify(item, index) {//选择规格
        this.classifyIndex = index
        this.classifyId = item.id
        // this.$set(this.goodsDetail, 'stock', item.stock)
        // this.$set(this.goodsDetail, 's_price', item.price)
      },
      toCart() {
        wx.switchTab({url: '/pages/cart/cart'})
      },
	  //获取推荐商品
	  async getRecommendMedicineList(classifyId){
		let merchant = wx.getStorageSync('merchant')
	    let res=await this.$api.getMerchantMedicineList({
	  	  merchant_id: merchant.merchant_id,
	  	  limit: 6,
		  classify_id: classifyId,
	  	  page: this.page
	    },this.$baseUrl);
	    if(res.data.level=='success'){
			if (res.data.level == 'success'){
				if(this.page == 1){
					this.recommendData = res.data.data.medicine_info;
				} else{
					if(res.data.data.medicine_info.length == 0){
						this.page--;
					} else{
						this.recommendData = this.recommendData.concat(res.data.data.medicine_info)
					}
				}
				for(let i=0;i<this.recommendData.length;i++){
					if(this.goodsDetail.id==this.recommendData[i].id){
						this.recommendData.splice(i,1)
						break;
					}
				}
			}
	    } else{
	  	  uni.showToast({
	  	  	title: res.data.message,
	  		icon: 'none',
	  		duration: 1500
	  	  })
	    }
	  },

	  showDiscountPopup() {
		this.popupShow = true;
	  },

	  //跳转商品详情
	  toGoodsDetail(id){
	    wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
	  },

	  //微信授权
	  async bindGetUserInfo(){
	      var _this=this;
	      uni.login({
	          success: res =>{
	              let code = res.code;
	              uni.getUserInfo({
	                  success: async res => {
	  					wx.showLoading({
	  						title: '正在登录'
	  					})
	                      let params = {
	                          raw_data:res.rawData,
	                          signature:res.signature,
	                          code:code
	                      }
	                      const result = await _this.$api.wxAppLogin(params,this.$baseUrl);
						  wx.hideLoading();
	                      if (result.data.level == 'success'){
	                          uni.setStorageSync('userToken',result.data.data);
							  this.userToken = result.data.data
							  this.getUserInfos()
							  wx.showToast({
							  	title: "登录成功",
							  	icon: "none",
							  	duration: 1500
							  })
	                      } else{
	  						wx.showToast({
	  							title: result.data.message,
	  							icon: "none",
	  							duration: 1500
	  						})
	  					}
	                  },
	  				fail: (res) => {
	  					wx.hideLoading()
	  				}
	              })
	          }
	      })
	  },

		//获取个人信息
		async getUserInfos(){
			let userToken=wx.getStorageSync('userToken');
			if(userToken){
				const res=await this.$api.getUserInfos({user_token:userToken},this.$baseUrl);
				if(res.data.level=='success'){
					this.userInfo=res.data.data
					uni.setStorageSync('user_id',this.userInfo.id);
					uni.setStorageSync('wx_openid',this.userInfo.wx_openid);
					this.userToken = userToken
					this.user_id = this.userInfo.id
					this.merchant = wx.getStorageSync('merchant')
					//udesk获取用户信息
					if(this.userInfo != ""){
						this.nickname = this.userInfo.user_info.nickname;
						this.photo_url = this.userInfo.user_info.photo_url;
					}
				}
				wx.hideLoading()
			}

		},

		async getMerchantInfo(){
			const res = await this.$api.getMerchantInfo({merchant_id: this.merchant_id}, this.$baseUrl)
			wx.hideLoading()
			if (res.data.level === "success") {
				wx.setStorageSync("merchant", res.data.data)
			} else {
				wx.showToast({
					title: res.data.message,
					icon: "none",
					duration: 1500
				})
			}
		},

    },
    onShareAppMessage() {
      let params = {
        desc: this.goodsDetail.name,
      }
      params.path = '/pages/goodsDetail/goodsDetail?id='+ this.id + '&&user_id=' + this.user_id;
      console.log(params)
      return params;
    },
    onShow() {
      this.num = 1;//清空选择商品的数量
      this.showModal = false//显示弹出层
      this.buyNow = false//显示加入购物车还是立即购买按钮
      this.classifyIndex = -1,//规格索引
      this.classifyId = ''//规格idm
	  this.userToken = wx.getStorageSync('userToken')
    },

  }
</script>

<style scoped lang="scss">
  @import "../../common/css/mixin.scss";

  .scrollForbidden {
    overflow: hidden; /*有弹出层时禁止下层滑动*/
  }

  swiper{height: 375px;}
  .slide-image{width: 100%;height: 375px;}

  /* 头部 */
  .goodsDetail {
    width: 100%;
    height: 100%;
    background: #eee;
  }

  .name_wrapper {
    padding: 10px;
    background: #fff;
  }

  .name {
    @include ellipsis(2);
    line-height: 40rpx;
    max-height: 80rpx;
    font-size: 32rpx;
    /* font-weight: bold; */
	font-weight: 500;
	color: #282936;
  }

  .top-detail{
	 margin-top: 5px;
	 font-size: 12px;
	 color: #8C8C8C;
	 line-height: 20px;
  }

  .desc {
    padding: 10rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
    .price {
      font-size: 26rpx;
      line-height: 70rpx;
	  @include flex(flex-start);
      .s-price {
        font-size: 22px;
		color: #FA4C72;
      }
	  .m-price {
	    text-decoration: line-through;
	    margin-left: 30rpx;
		color: #5c5c5c;
	  }
    }
    .bottom {
      font-size: 26rpx;
      color: #5c5c5c;
      @include flex(flex-start);
      line-height: 50rpx;
	  margin-right: 10px;
    }
  }

  .service {
    background: #ffffff;
    margin-top: 1rpx;
    padding: 15px 10px;
    @include flex(flex-start);
    flex-direction: row;

    .service-item {
      margin-right: 30rpx;

      img {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
        vertical-align: middle;
      }

      span {
        font-size: 24rpx;
        color: #5c5c5c;
        line-height: 30rpx;
      }
    }
  }

  /* 中间详情 */
  .goods_desc {
    width: 100%;
    margin-top: 10px;
    padding-bottom: 100rpx;
  }

  .goods_desc_item {
    background: #fff;
    display: flex;
    height: 40px;
    align-items: center;
    padding: 5px 10px;
	.left-text{
		color: #B8B8B8;
		font-size: 12px;
		span{
			color: #666666;
			font-size: 13px;
			/* @include ellipsis(1); */
		}
	}
	.one-line{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		padding-right: 5px;
	}
  }
  .goods_desc_item:nth-child(2){
	  padding: 0 10px;
  }

  .goods_desc_item image {
    width: 5px;
    height: 8px;
  }

  .list_item_arrow {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .desc-nav {
    width: 100%;
    background: #ffffff;
    /* border-bottom: 2rpx solid #eeeeee; */
    @include flex(flex-start);
    flex-direction: row;

    .nav-item {
      width: 50%;
      font-size: 30rpx;
      color: #5c5c5c;
      line-height: 100rpx;
      height: 100rpx;
      text-align: center;

      .active {
        line-height: 100rpx;
        height: 100rpx;
        border-bottom: 5px solid #09C15F;
        display: inline-block;
		color: #000000;
		font-weight: bold;
      }
    }
  }

  /* 评论列 */
  .comment {
    width: calc(100% - 20px);
    background: #fff;
    padding: 10px;
  }

  .comment_item {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    color: rgb(63, 60, 60);
    font-size: 14px;
  }

  .comment_item_top {
    @include flex(flex-start);
    flex-direction: row;
    /*margin-bottom: 10px;*/
  }

  .comment_item_img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 360rpx;
    overflow: hidden;
    margin-right: 10rpx;
  }

  .comment_item_nick {
    line-height: 80rpx;
    height: 80rpx;
  }

  .comment_item_content {
    padding: 10rpx 0 10rpx 100rpx;
    line-height: 40rpx;
  }

  .comment_item_time {
    text-align: right;
    font-size: 28 rpx;
    color: #5c5c5c;
  }

  .comment_btn {
    /*margin-top:10px;*/
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1rpx solid #eeeeee;
  }

  .comment_btn_all, .comment_btn_pic {
    width: 40%;
    height: 30px;
    line-height: 30px;
    padding: 2.5px 5px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid gray;
  }

  .no-wrap{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: normal;
    font-size: 13px;
    padding: 0 5px;
    min-height: 13px;
  }

  .page-section-spacing {
  	padding: 0 8px;
  }

  .scroll-view_H {
  	white-space: nowrap;
  	width: 100%
  }

  .scroll-view-item_H {
  	display: inline-block;
  	width: 110px;
  	text-align: center;
  	border: 1px solid #EEEEEE;
  	border-radius: 10rpx;
  	margin-right: 10px;
  	padding: 10px 10px 0;
  	background-color: #FFFFFF;
  	.item-img{
  		width: 110px;
  		height: 110px;
  	}
  }
  .scroll-view-item_H:last-child{
  	margin-right: 0;
  }

  /* 商品介绍 */
  .goods_introduce {
    background: #fff;
    width: calc(100% - 20px);
    padding: 10px 10px 50px 10px;
  }

  /* 规格参数 */
  .spec-value{
	  background-color: #FFFFFF;
	  padding: 10px;
	  .content{
	  	border: 1px solid #f4f4f4;
	  	padding: 0 5px;
	  }
	  .content-item{
	  	display: flex;
	  	align-items: center;
	  	padding: 10px 0;
	  	border-bottom: 1px solid #f4f4f4;
	  	font-size: 15px;
	  	.item-left{
			width: 30%;
			color: grey;
			/* font-weight: 700; */
	  	}
	  	.item-right{
	  		width: 70%;
	  		color: #464646;
	  		margin-left: 8px;
	  	}
	  }
  }
  .goods_specs{
	  background: #fff;
	  width: calc(100% - 20px);
	  padding: 10px 10px 50px 10px;
	  .content{
		  border: 1px solid #f4f4f4;
		  padding: 0 5px;
	  }
	  .content-item{
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f4f4f4;
		font-size: 15px;
		.item-left{
			width: 30%;
			color: grey;
			/* font-weight: 700; */
		}
		.item-right{
			width: 70%;
			color: #464646;
			margin-left: 8px;
		}
	  }
	}


  /* 底部购物栏 */
  .cartBar {
    width: 100%;
    height: 45px;
    display: flex;
    position: fixed;
    bottom: 0;
    background: #fff;
	/* border-top: 1px solid #FFFFFF; */
  }
  .cartBar_left{
	width: 150px;
   }
   .cartBar_right{
	   width: calc(100% - 150px);
   }
  .cartBar_left, .cartBar_right {
    /* flex: 1; */
    display: flex;
  }

  .cartBar_left_item {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }

  .cartBar_left_item > img {
    width: 20px;
    height: 20px;
  }

  .cartBar_right {
    display: flex;
    line-height: 45px;
    text-align: center;
    color: #fff;
  }

  .cartBar_right > view {
    flex: 1;
  }

  .cartBar_right > view:nth-child(1) {
    background: #F0F0F5;
	color: #000000;
  }

  .cartBar_right > view:nth-child(2) {
    background: #09C15F;
  }

  .cartIcon_wrapper {
    position: relative;
  }

  .cartIcon {
    position: absolute;
    background: red;
    right: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    top: -5px;
  }


  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
  }
  .modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 99999;
    background-color: #fff;
    padding-bottom: 40px;
	border-radius: 10px 10px 0 0;
  }

  .modalDlg_top{
    padding:5px;
    padding-right:25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 35%;

  }
  .modalDlg_top>img{
    width:80px;
    height: 80px;
  }
  .modalDlg_top_right{
    margin-left:20px;
    width:calc(100% - 100px);
  }
  .modalDlg_top_right_name{
    display: flex;
    align-items: center;
    span{
      @include ellipsis(3)
    }
  }
  .modalDlg_top_right_name_tag{
    color:purple;
    display: inline-block;
    width:50px;
    text-align: center;
    border:1px solid purple;
    font-size: 10px;
    border-radius: 5px;
    margin-right:5px;
  }
  .modalDlg_top_right_name_tag+span{
    width:200px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .modalDlo_bottom{
    margin-left:5px;
  }
  .cart_price{
    margin-top:15px;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  .cart_price>span:nth-child(1){
    color:red;
  }
  .modalDlo_center{
    max-height: 45%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
    width:100%;
    /*max-height: 45%;*/
  }
  .modalDlo_center_classify{
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    margin:10px 0;
    /*padding-bottom: 50px;*/
  }
  .modalDlo_center_classify>view{
    border:1px solid #eee;
    padding:2.5px 5px;
    border-radius: 5px;
    margin-left:5px;
    text-align: center;
  }
  .modalDlo_center_tit{
    padding-left:10px;
  }
  .join_cart{
    width:100%;
    background: #ff1f3a;
    color:#fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    bottom:0;
  }
  button::after {
    border: none;
  }
  button {
    background-color: #fff;
    line-height: 16px;
    font-size: 10px;
    border-radius:0;
  }

  .comment_item_pic {
    /*display: flex;*/
    padding: 10rpx 0 10rpx 80rpx;
    @include flex(flex-start);
    flex-direction: row;
    flex-wrap: wrap;
  }

  .comment_item_pic > img {
    width: calc((100vw - 180rpx)/3);
    height: calc((100vw - 180rpx)/3);
    margin-left: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }

  .comment-active {
    background: red;
    color: #ffffff;
    border: none;
  }

  /* 规格 */
  .selectClassify {
    border: red 1px solid !important;
    color: red;
  }
</style>
